<template>
    <div class="goodsinfo">
        <myheader title="商品详情"></myheader>
       <transition  v-on:before-enter="beforeEnter"
                   v-on:enter="enter"
                   v-on:after-enter="afterEnter">
           <div class="ball" v-show="flag"></div>
       </transition>
<!--        商品轮播部分-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe :swiperList="swiperList"></swipe>
                </div>
            </div>
        </div>
<!--        商品购买组件-->
        <goodsbuy :goodsinfo="goodsinfo" @anniubeidian="gotoshopcart"></goodsbuy>
<!--        商品展示组件-->
        <goodsshow :goodsinfo="goodsinfo" :goodsdesc="goodsdesc"></goodsshow>

    </div>
</template>

<script>
    import myheader from '../../components/Header'
    import swipe from  '../../components/swiper'
    import goodsbuy from './goodsbuy'
    import goodsshow from './goodsshow'
    import  {Toast} from 'mint-ui'
    export default {
        name: "goodsinfo",
        components:{
            myheader,
            swipe,
            goodsbuy,
            goodsshow
        },
        data(){
            return {
                swiperList:[],
                id:this.$route.params.id,
                goodsinfo:{},
                goodsdesc:{},
                flag:false
            }
        },
        methods:{
            beforeEnter(el){//小球动画开始时候的状态,el表示我们的小球，
                //相当于我们使用 var ball = document.querySelector('.ball')
                el.style.transform ='translate(0,0)'
            },
            enter(el){ //小球中间的一个状态
                el.offsetTop  //动态的跳转
                el.style.transform ='translate(60px,-60px)'
                el.style.transition='all .2s ease-out'

            },
            afterEnter(el){ //小球动画结束时候的一个状态

              var ballposition =  el.getBoundingClientRect()  // 小球的位置
              var badgeposition =document.querySelector('.badge').getBoundingClientRect()  //购物车徽章的位置
                console.log(ballposition.y,badgeposition.y);
                 var x = badgeposition.x - ballposition.x  //小球的垂直方向位置 减去 小球垂直方向的位置
                var y = badgeposition.y - ballposition.y  //徽章的垂直方向位置 减去 小球垂直方向的位置
                el.style.transform =`translate(${x+60}px,${y-60}px)` //${y}方式可以在模板字符串中应用变量
                el.style.transition='all .6s ease-in'
                this.flag = false
            },
            gotoshopcart(valus){//将商品添加到购物车,首先让小球由false变成true
                this.flag = true//小球变显示状态
                var shopcartgoodsinfo = { //把购买商品的数据，重新收集起来了，放在一个对象中了
                    id:this.goodsinfo.id, //商品id
                    title:this.goodsinfo.title, //标题
                    price:this.goodsinfo.sell_price, //价格
                    selected:true,   //选择状态
                    count:valus, //数量
                    stock:this.goodsinfo.stock_quantity, //库存数量
                    img:this.swiperList[0].img
                }
                this.$store.commit('SET_SHOPCARTDATA',shopcartgoodsinfo)
            },
            getSwiperlist(){
                this.$http.get('api/getthumimages/'+this.id).then(res=>{
                   res.body.message.forEach(item=>{ //item.是数组中的每一项
                       //现在每一个数组对象中没有img属性，轮播组件中需要，所以需要创建一个
                       // 把每个数组对象中的src属性赋值给img属性
                       item.img = item.src
                   })
                    this.swiperList = res.body.message
                },err=>{
                    Toast('获取轮播数据失败！')
                })
            },
            getgoodsinfo(){ //获取goodsbuy组件需要的数据
                this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
                    // console.log(res);
                    this.goodsinfo = res.body.message[0]
                },err=>{
                    Toast('获取商品购买数据失败！')
                })
            },
            getgoodsdesc(){ //获取商品的图文介绍数据
                this.$http.get('api/goods/getdesc/'+this.id).then(res=>{
                    // console.log(res);
                    this.goodsdesc = res.body.message[0]
                },err=>{
                    Toast('获取商品介绍数据失败！')
                })
            }
        },
        created(){
            this.getSwiperlist(); //获取轮播数据
            this.getgoodsinfo();  //获取商品详情
            this.getgoodsdesc()   //获取图文介绍
        }
    }
</script>

<style scoped>
    .goodsinfo{
        position: relative;
    }
    .ball{
        position: absolute;
        top: 360px;
        left: 142px;
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        z-index: 100;

    }
</style>
